<template>
    <van-swipe-cell class="box" v-for="item in cartList" :key="item.id" :before-close="beforeClose">
        <van-card class="shopcart" :num="item.number" :price="item.price" :title="item.Product" :thumb="item.imgUrl">
            <template #tags>
                <van-tag color="rgb(244, 244, 244)" text-color="rgb(127, 127, 127)" round type="primary">
                    {{ item.type }}
                </van-tag>
            </template>
            <template #footer>

            </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
        </template>
    </van-swipe-cell>
</template>
  
<script setup lang="ts">
import { onMounted } from 'vue';
import cartApi, { type userCartModel } from '@/api/cart'
import { ref } from 'vue'
import { showToast } from 'vant';
import { showConfirmDialog } from 'vant';

const isLoading = ref(false)

onMounted(() => {
    getCartList()
})

//获取购物车列表
const cartList = ref<userCartModel[]>([])
const getCartList = async () => {
    isLoading.value = true
    try {
        let result = await cartApi.reqUserCartList2()
        cartList.value = result.data
        // console.log(cartList.value)
    } catch (error) {
        showToast({
            message: '获取购物车列表失败',
        });
    } finally {
        isLoading.value = false
    }
}

const beforeClose = ({ position })=>{
    switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            showConfirmDialog({
              title: '确定删除吗？',
            }).then(resolve);
          });
      }
}

</script>
  
<style scoped>
.box {
    margin: 0 12px;
}

.shopcart {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 0;
    padding: 8px 16px 8px 0;
}

.goods-card {
    margin: 0;
}

.delete-button {
    height: 100%;
}
</style>